<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <title>地球站地图信息</title>
    <link rel="stylesheet" href="style.css?v=1.1" />
    <script src="//api.map.baidu.com/api?v=2.0&ak=tIG0VakQDTTz0LtvMZnZUceIGPygI3Gc"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <header class="header">
      <form class="condition-form" id="search-form" action="#">
        <div class="form-group">
          <label class="form-label" for="station">地球站名称：</label>
          <div class="form-content">
            <div class="select" for="station">
              <span tabindex="0" id="station" class="select-viewer placeholder">
                请选择......
              </span>
              <ul class="dropdown" id="dropdown"></ul>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label" for="condition">协调条件：</label>
          <div class="form-content">
            <input
              type="text"
              readonly
              id="condition"
              name="condition"
              class="condition"
              placeholder="请选择地球站"
            />
            (MHz)
          </div>
        </div>
        <input class="search-btn" type="submit" value="协调分析" />
      </form>
    </header>
    <aside class="aside" id="aside">
      <ul class="collapses">
        <li class="collapse">
          <header class="collapse-header is-station" id="earth-station">
            地球卫星站
          </header>
          <section class="collapse-content"></section>
        </li>
        <li class="collapse collapsed">
          <header class="collapse-header" id="blocked">
            阻塞干扰-数量<span class="count">(0)</span>
          </header>
          <section class="collapse-content"></section>
        </li>
        <li class="collapse collapsed">
          <header class="collapse-header" id="interfered">
            有干扰-数量<span class="count">(0)</span>
          </header>
          <section class="collapse-content"></section>
        </li>
        <li class="collapse collapsed">
          <header class="collapse-header" id="uninterfered">
            无干扰-数量<span class="count">(0)</span>
          </header>
          <section class="collapse-content"></section>
        </li>
      </ul>
    </aside>
    <div class="legend">
      <h3>图例</h3>
      <div class="legend-item">
        <div class="legend-label">卫星地球站：</div>
        <div class="legend-content">
          <span class="status done">已协调</span>
          <span class="status pending">未协调</span>
        </div>
      </div>
      <div class="legend-item">
        <div class="legend-label">5G基站：</div>
        <div class="legend-content">
          <span class="status block">有干扰</span>
          <span class="status empty">无协调</span>
        </div>
      </div>
      <div class="legend-item">
        <div class="legend-label">协调条件：</div>
        <div class="legend-content">
          <span class="freq-status">3400-3600</span>
          <span class="freq-status">3600-3700</span>
          <span class="freq-status">3700-4200</span>
          <span class="freq-status">4800-4900</span>
          <span class="freq-status">4900-5000</span>
        </div>
      </div>
    </div>
    <span class="zip" id="toggle-aside"></span>
    <script src="main.js?v=1.1"></script>
  </body>
</html>
